<template>
  <!-- 为了恢复这个页面时，能还原它的滚动条的位置
    1. 监听用户的滚动，保存下来当前的位置。
      @scroll
    2. 再次回来时，页面恢复时， 重置一下滚动条。 -->
  <div class="scroll-wrapper" @scroll="hScroll" ref="myScroll">
    <van-pull-refresh v-model="isLoadingNew" @refresh="onRefresh">
    <!-- {{channel.name}}文章列表组件 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="(item,idx) in list"
      :key="idx"
      :title="item.title"
      @click="$router.push('/article/'+item.art_id.toString())"
      >
        <div slot="label">
          <!-- 图片van-grid··· :border="false"取消宫格边框线-->
          <van-grid :column-num="item.cover.images.length" :border="false">
            <van-grid-item v-for="(img,idx) in item.cover.images" :key="idx" >
              <van-image lazy-load :src="img" />
            </van-grid-item>
          </van-grid>
          <!-- 文字说明 -->
          <div class="meta">
            <span>{{item.aut_name}}</span>
            <span>{{item.comm_count}}评论</span>
            <span>{{item.pubdate | relativeTime}}</span>
            <!-- 只有是登陆用户，才能看见这个 X 按钮 -->
            <span class="close" @click.stop="hClose(item)" v-if="$store.state.tokenInfo.token">
              <van-icon name="cross">
             </van-icon>
            </span>
          </div>
        </div>
      </van-cell>
    </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from '@/api/article.js'
// import { formateTime, relativeTime } from '@/utils/date-time.js'
export default {
  name: 'ArticleList',
  props: ['channel'],
  components: { },
  data () {
    return {
      list: [],
      loading: false, // 是否上拉刷新
      finished: false, // 上拉加载是否已经加载了全部数据
      timestamp: null,
      isLoadingNew: false // 是否下拉加载更多
    }
  },
  computed: { },
  created () {
    // 创建组件完成，会自动调用created
    console.log(Date.now(), this.channel)
    // console.log(formateTime(Date.now()))
    // console.log(relativeTime(Date.now()))
    // 监听事件总线 当事件发生时，在回调函数中，接收参数
    this.$eventBus.$on('delArticle', obj => {
      // console.log(Date.now(), this.channel, '收到事件 delArticle')
      // console.log(obj)
      // 从参数中折分出channelId和articleid
      const { channelId, articleId } = obj
      // 判断是否需要从本组件中的list中 删除编号为article的文章
      // this.channel是通过父组件中的props传入的
      if (channelId !== this.channel.id) {
        return
      }
      // 在list中找出文章id为articleId的元素，并删除
      // 在数组list中找出一个元素(它的id为articleId)，删除它
      //   (1) 找出元素的下标
      //   (2) 删除：slice(下标,1)
      const idx = this.list.findIndex(it => it.art_id.toString() === articleId)
      if (idx !== -1) {
        // 找到了下标, 删除它
        this.list.splice(idx, 1)
      }
    })
  },
  activated () {
    if (this.scrollTop && this.$refs.myScroll) {
      this.$refs.myScroll.scrollTop = this.scrollTop
    }
  },
  methods: {
    hScroll (event) {
      this.scrollTop = event.target.scrollTop
    },
    // 用户点击了文章关闭按钮
    hClose (article) {
      // 向父组件index.vue抛出事件，父组件收到时打开弹层
      this.$emit('showMoreAction', article.art_id.toString())
    },
    async onRefresh () {
      // 发请求取最新数据
      const result = await getArticles(this.channel.id, Date.now())
      // 添加到list
      const arr = result.data.data.results
      this.list.unshift(...arr) // 添加到list的开头!
      // 更新下拉刷新的状态
      this.isLoadingNew = false
      // 提示
      this.$toast.success('加载成功' + arr.length + '条数据')
      // setTimeout(() => {
      //   this.$toast.success('刷新成功')
      //   this.isLoadingNew = false
      // }, 1000)
    },
    // onLoad的执行时机：
    // 1. 页面打开，不足一屏，会自动调用
    // 2. 手动上拉
    async onLoad () {
      console.log('当前数据的条数', this.list.length, '加载新数据')
      if (!this.timestamp) {
        this.timestamp = Date.now()
      }
      const result = await getArticles(this.channel.id, this.timestamp)
      console.log(result)
      // 1. 把请求结果 添加到 list中
      const arr = result.data.data.results
      // 保存本次请求回的时间戳，以便下次发请求
      this.timestamp = result.data.data.pre_timrstamp
      this.list = this.list.concat(arr)
      // 2. 加载状态结束
      this.loading = false
      // 3. 判断是否数据全部加载完成
      // 如果本次取不到数据了，则说明所有的数据加载完成
      if (arr.length === 0) {
        this.finished = true
      }
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    //   setTimeout(() => {
    //     for (let i = 0; i < 10; i++) {
    //       this.list.push(this.list.length + 1)
    //     }
    //     // 加载状态结束
    //     this.loading = false
    //     // 数据全部加载完成
    //     if (this.list.length >= 100) {
    //       this.finished = true
    //     }
    //   }, 1000)
    }
  }
}
</script>

<style scoped lang='less'>
.meta {
  display:flex;
  span {
    margin-right:10px;
  }
  .close{
    // 让它在最右边
    // 它的父级容器是flex的，给当前元素设置左外边距为auto，会让这个元素在父级容器
    // 的最右边
    margin-left:auto;
  }
}
</style>
<!--
      1. van-list自带上拉加载更加多的效果
      2. 原理
         1） 数据项在list中。
         2） 在显示数据时，如果当前的数据内容不够一屏，它会自动调用onLoad去加载数据。
            在onLoad中，通过ajax取回数据
               - 添加到list
               - 把loading手动的设置为false
               - 如果所有的数据全部加载完成，则把 finished 设为true
         3) 如果手动向上拉，则也会去调用onLoad
    -->
